<template>
    <view  @click="push('/pages_qc/xsxq/index')"class="w-[100%] py-[20rpx] relative mb-[30rpx]">
        <image src="@/static/images/icon/card.png" class="w-[100%] top-0 absolute right-0 h-[100%]" />
        <view class="right_top ">
           <image class="w-[100rpx] h-[34rpx] mt-[12rpx]" src="@/static/images/icon/bkc.png"></image>
        </view>
      
        <view class="w-[360rpx] h-[104rpx] topBtn px-[32rpx] py-[12rpx] ml-[-12rpx] relative"
            style="border-radius: 12rpx 12rpx 12rpx 0rpx;background: linear-gradient( 180deg, #000000 0%, #585858 100%);">
            <image src="@/static/images/icon/car.png"
                class="w-[210rpx] z-[1] absolute top-[26rpx] right-[10rpx] h-[47rpx]" />
            <view class="text-[28rpx] text-[#fff] mb-[2rpx] font-[500]">
                {{ item.ownerName }}
            </view>
            <view class="text-[28rpx] text-[#fff] flex items-center  mt-[8rpx] font-[500]">
                <image src="@/static/images/icon/time2.png" class="w-[32rpx] h-[32rpx]" />
                <view class="text-[22rpx] ml-[12rpx] font-[400] text-[#CCCCCC]">{{ item.createTime }}</view>
            </view>
        </view>
        <view class="flex absolute top-[98rpx] right-[24rpx] ">
            <image src="@/static/images/icon/map2.png" class="w-[24rpx] h-[32rpx] mr-[8rpx] " />
            <view class="text-[#999999] text-[22rpx] font-[400]">{{ item.economize }}{{ item.market }}</view>
        </view>
        
        <view class="relative w-[100%] px-[24rpx] mt-[30rpx]">
              <!-- 底部按钮组 -->
              <view class="flex justify-between mt-[24rpx]">
                <view class="bottom-btn">已接听</view>
                <view class="bottom-btn">独享线索</view>
                <view class="bottom-btn">补发线索</view>
                <view class="bottom-btn">定制包</view>
                <view class="bottom-btn">邀约失败</view>
            </view>
            <view class="text-[rgb(0,0,0)] relative text-[28rpx] mt-[20rpx] font-[500]">
                {{ item.brandName }} {{ item.seriesName }} {{ item.modelNumber }}
            </view>
            <view class="text-[rgb(0,0,0)] flex items-center text-[24rpx] font-[500] mt-[24rpx]">
                <text class="text-[#666]">基础信息：</text>
                <text class="flex-1">{{ item.economize }}-{{ item.area }}·{{ item.kilometers }}公里·{{ item.vehicleAge }} {{ item.market }}上牌</text>
            </view>
            <view class="text-[rgb(0,0,0)] flex items-center text-[24rpx] font-[500] mt-[24rpx]">
                <text class="text-[#666]">派发信息：</text>
                <text class="flex-1">{{ item.createTime }}·{{ item.id }}</text>
            </view>
            <view class="text-[rgb(0,0,0)] flex items-center text-[24rpx] font-[500] mt-[24rpx]">
                <text class="text-[#666]">跟进人：</text>
                <text class="flex-1">{{ item.holder }}</text>
            </view>
            <!-- 备忘录内容 -->
            <view class="memo-box mt-[24rpx]">
                <view class="text-[24rpx] font-[500] mb-[12rpx]">备忘录：</view>
                <view class="text-[24rpx] text-[#666]">{{ item.informationRemarks || '暂无备忘录内容' }}</view>
            </view>
            
            <!-- 按钮组 -->
            <view class="flex justify-between mt-[24rpx]">
                <view class="action-btn">备忘录</view>
                <view class="action-btn">分配人员</view>
                <view class="action-btn">跟进反馈</view>
                <view class="action-btn" @click="showContactModal = true">联系车主</view>
            </view>
            
            <!-- 印章 -->
            <!-- <view class="stamp-placeholder">
                <image src="@/static/images/icon/map.png" class="stamp-image" />
            </view> -->
        </view>
    </view>

    <!-- 联系车主弹窗 -->
    <uni-popup ref="contactPopup" type="bottom" :mask-click="true" @change="popupChange">
        <view class="contact-modal mt-[52rpx]">
            <view class="contact-header flex items-center justify-between p-[32rpx]">
                <view class="flex items-center">
                    <image src="@/static/images/icon/qcc.png" class="w-[80rpx] h-[80rpx] rounded-[50%] mr-[20rpx]" />
                    <view>
                        <view class="text-[32rpx] font-bold">{{ item.ownerName }}</view>
                        <view class="text-[#FF9500] text-[28rpx]">{{ formatPhone(item.phone) }}</view>
                    </view>
                </view>
                <view class="call-btn flex items-center justify-center" @click="makePhoneCall">
                    <image src="@/static/images/icon/phone.png" class="w-[40rpx] h-[40rpx]" />
                </view>
            </view>
            
            <view class="battle-btn flex items-center justify-center my-[20rpx] mx-[30rpx]" @click="handleBattle">
                <image src="@/static/images/icon/batty.png" class="w-[666rpxrpx] h-[88rpx] mr-[10rpx]" />
                <!-- <text class="text-white text-[32rpx] font-bold">邀约比武</text> -->
            </view>
            
            <view class="battle-desc text-center text-[24rpx] text-[#999] mt-[24rpx] pb-[60rpx]">
                邀约同行比武，如有同行加入将获得线索50元回收现金
            </view>
        </view>
    </uni-popup>
</template>

<script setup>
import { ref, watch, defineProps } from 'vue';

// 定义props接收工单数据
const props = defineProps({
  item: {
    type: Object,
    required: true,
    default: () => ({})
  }
});

// 控制弹窗显示
const showContactModal = ref(false);
const contactPopup = ref(null);

// 监听showContactModal变化
watch(showContactModal, (newVal) => {
    if (newVal) {
        contactPopup.value.open();
    } else {
        contactPopup.value.close();
    }
});

// 弹窗状态变化
const popupChange = (e) => {
    if (!e.show) {
        showContactModal.value = false;
    }
};

// 格式化电话号码
const formatPhone = (phone) => {
    if (!phone) return '';
    // 保留前3位和后4位，中间用****代替
    return phone.substring(0, 3) + '****' + phone.substring(phone.length - 4);
};

// 拨打电话
const makePhoneCall = () => {
    if (!props.item.phone) {
        uni.showToast({
            title: '电话号码不可用',
            icon: 'none'
        });
        return;
    }
    
    uni.makePhoneCall({
        phoneNumber: props.item.phone,
        success: () => {
            console.log('拨打电话成功');
        },
        fail: (err) => {
            console.error('拨打电话失败', err);
        }
    });
};

// 处理邀约比武
const handleBattle = () => {
    uni.showToast({
        title: '邀约比武成功',
        icon: 'none'
    });
    showContactModal.value = false;
};
</script>

<style lang="scss" scoped>
// 保留原有样式

.btn {
    width: 500rpx;
    height: 96rpx;
    background: linear-gradient(98deg, #000000 0%, #454545 100%);
    border-radius: 16rpx;
}

.gradient-text {
    background: linear-gradient(180deg, #FFE788 0%, #FFF6D7 100%);
    -webkit-background-clip: text;
    font-weight: 600;
    font-size: 32rpx;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.topBtn::after {
    content: '';
    position: absolute;
    width: 12rpx;
    height: 20rpx;
    background: linear-gradient(45deg, #f7f7f7, #f7f7f7 50%, #000000 50%, #000000 100%);
    bottom: -18rpx;
    left: 0;
}

.right_top {
    width: 264rpx;
    height: 104rpx;
    background: linear-gradient(98deg, #FFF8DD 0%, #FFD856 100%);
    border-radius: 16rpx 36rpx 16rpx 16rpx;
    position: absolute;
    top: 20rpx;
    right: 6rpx;
    padding: 4rpx 40rpx;
    font-size: 34rpx;
    color: #000000;
    font-weight: 700;
    text-align: end;
    z-index: -1;
}

.action-btn {
    padding: 12rpx 24rpx;
    background-color: #FFEFB8;
    border-radius: 8rpx;
    font-size: 24rpx;
    color: #333;
    text-align: center;
}

.bottom-btn {
    padding: 10rpx 20rpx;
    background-color: #FFFBEB;
    border-radius: 8rpx;
    font-size: 22rpx;
    color: #9C8C57;
    text-align: center;
}

.memo-box {
    background-color: #f9f9f9;
    padding: 16rpx;
    border-radius: 8rpx;
}

.progress-container {
    height: 40rpx;
    background-color: #f0f0f0;
    border-radius: 20rpx;
    position: relative;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background-color: #FFD856;
    border-radius: 20rpx;
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24rpx;
    color: #333;
}

.stamp-placeholder {
    position: absolute;
    bottom: 20rpx;
    right: 30rpx;
    width: 120rpx;
    height: 120rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stamp-image {
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

// 新增弹窗样式
.contact-modal {
    background-color: #fff;
    border-radius: 60rpx 60rpx 0 0;
    overflow: hidden;
    
}



.call-btn {
    width: 80rpx;
    height: 80rpx;
    background-color: #f5f5f5;
    border-radius: 50%;
}



</style>